<script setup lang="jsx">

import {AddIcon, DeleteIcon, MoreIcon, NotificationIcon, SearchIcon, ShareIcon} from "tdesign-icons-vue-next";
import {computed, reactive, ref, onMounted} from 'vue';
import {useAdministratorStore} from "@/stores/administrator.js";
import {MessagePlugin} from "tdesign-vue-next";
import {
  createActivity, deleteActivityApi,
  deleteAdministratorApi,
  listActivityAdministrator,
  listAdministrator, reviewActivity, updateActivity
} from "@/api/administrator.js";
import {ErrorCircleFilledIcon, CheckCircleFilledIcon, CloseCircleFilledIcon} from 'tdesign-icons-vue-next';
import {changeStartTimeNotice, listPageGroupSelf} from "@/api/group.js";
import {useUserStore} from "@/stores/user.js";
import router from "@/router/index.js";

const userStore = useUserStore()

// header单选栏切换 --------------------------------------------------------------
const radioCreatedButton = ref(1);
const onClickRadioCreatedButton = async (value) => {
  radioCreatedButton.value = value
  const res = await listPageGroupSelf(userStore, current.value, pageSize.value, radioCreatedButton.value, radioTimeButton.value)
  groupList.value = res.data.data.records
  total.value = res.data.data.total
}

const radioTimeButton = ref(1);
const onClickRadioTimeButton = async (value) => {
  radioTimeButton.value = value
  const res = await listPageGroupSelf(userStore, current.value, pageSize.value, radioCreatedButton.value, radioTimeButton.value)
  groupList.value = res.data.data.records
  total.value = res.data.data.total
}

// 搜索 --------------------------------------------------------------------------

const searchValue = ref('');
const onClear = () => {
  console.log('clear');
};
const onBlur = () => {
  console.log('blur');
};

// 数据 -----------------------------------------------------------------------------------------------
const groupList = ref([])
onMounted(async () => {
  const res = await listPageGroupSelf(userStore, current.value, pageSize.value, radioCreatedButton.value, radioTimeButton.value)
  groupList.value = res.data.data.records
  total.value = res.data.data.total
})

// 分页控件 ---------------------------------------------------------------------------------------------
const current = ref(1);
const pageSize = ref(6);
const total = ref(0)

const pageSizeOption = [6, 12, 24]

const onPageSizeChange = async (size) => {
  const res = await listPageGroupSelf(userStore, current.value, pageSize.value, radioCreatedButton.value, radioTimeButton.value)
  groupList.value = res.data.data.records
  total.value = res.data.data.total
};

const onCurrentChange = async (index, pageInfo) => {
  const res = await listPageGroupSelf(userStore, current.value, pageSize.value, radioCreatedButton.value, radioTimeButton.value)
  groupList.value = res.data.data.records
  total.value = res.data.data.total
};

const onChange = (pageInfo) => {
  console.log(pageInfo);
};

// 初始化数据 ---------------------------------------------
onMounted(async () => {


})

// list --------------------------------------------------
const listCount = ref(10);
const asyncLoadingRadio = ref('loading-custom');

const asyncLoading = computed(() => {
  if (asyncLoadingRadio.value === 'loading-custom') {
    return '没有更多数据了';
  }
  return asyncLoadingRadio.value;
});
const imageUrl = 'https://tdesign.gtimg.com/site/avatar.jpg';

// 活动详情 ----------------------------------------------------
const activityVisible = ref(false)
const jumpTo = async (id, activityName) => {
  await router.push({path: '/user/activity/group', query: {activityId: id, activityName: activityName}});
}

// 队伍详情 ---------------------------------------------------
const groupVisible = ref(false)

// 修改通知时间 ---------------------------------------------------

const changNoticeTime = async (data, groupId) => {
   await changeStartTimeNotice(userStore, groupId, data.timeBeforehand)
}
</script>

<template>
  <t-layout style="
      height: 100%;                /* 继承父容器高度 */
    ">
    <t-header style="display: flex;               /* 启用flex布局 */
      align-items: center;         /* 垂直居中 */
      justify-content: center;     /* 水平居中 */
      padding-left: 2%;
      padding-right: 1%;
      background-color: #e5e5e5;
      width: auto;">
      <div style="display: flex; justify-content: flex-start; width: 100%">
        <div>
          <t-radio-group style="background-color: #cccccc" variant="primary-filled" default-value="1">
            <t-radio-button value="1" @click="onClickRadioCreatedButton(1)">全部</t-radio-button>
            <t-radio-button value="0" @click="onClickRadioCreatedButton(2)">我创建的</t-radio-button>
            <t-radio-button value="2" @click="onClickRadioCreatedButton(3)">我加入的</t-radio-button>
          </t-radio-group>
        </div>
        <div style="padding-left: 2%">
          <t-radio-group style="background-color: #cccccc" variant="primary-filled" default-value="1">
            <t-radio-button value="1" @click="onClickRadioTimeButton(1)">全部</t-radio-button>
            <t-radio-button value="0" @click="onClickRadioTimeButton(2)">待开始</t-radio-button>
            <t-radio-button value="4" @click="onClickRadioTimeButton(4)">已结束</t-radio-button>
            <t-radio-button value="2" @click="onClickRadioTimeButton(3)">进行中</t-radio-button>
          </t-radio-group>
        </div>
      </div>

<!--      <div style="display: flex; justify-content: flex-end; width: 100% ">-->
<!--        <div style="padding-right: 2%">-->
<!--          <t-input v-model="searchValue" placeholder="输入活动" borderless clearable @clear="onClear"-->
<!--                   @blur="onBlur"></t-input>-->
<!--        </div>-->
<!--        <div style="padding-right: 2%">-->
<!--          <t-button shape="circle" theme="primary">-->
<!--            <template #icon>-->
<!--              <SearchIcon/>-->
<!--            </template>-->
<!--          </t-button>-->
<!--        </div>-->
<!--      </div>-->


    </t-header>
    <t-content style="background-color: white; width: 100%; ">
      <div v-if="groupList.length !== 0" style="
        display: grid;
        grid-template-columns: repeat(auto-fill, 360px);
        justify-content: center;
        gap: 16px;
        padding-top: 2%;

  ">
        <div v-for="(item, index) in groupList">
          <t-card :title="`团队${item.group.id} | ${item.activity.activityName}`" header-bordered hover-shadow
                  :style="{ width: '360px' }">
            <template #actions>
              <t-tag v-if="item.group.groupStatus === 0" shape="round" theme="warning">待成团</t-tag>
              <t-tag v-else shape="round" theme="success">成团成功</t-tag>
              <t-tag color="white"></t-tag>
              <t-tag v-if="item.groupTime === 2" shape="round" theme="primary">待开始</t-tag>
              <t-tag v-else-if="item.groupTime === 4" shape="round" theme="danger">已结束</t-tag>
              <t-tag v-else shape="round" theme="success">进行中</t-tag>
            </template>
            <div>截止时间: {{ item.group.expirationTime }}</div>
            <div>开始时间: {{ item.group.startTime }}</div>
            <div>结束时间: {{ item.group.endTime }}</div>
            <div>拼团情况: {{ item.group.alreadyNum }}/{{ item.group.neededNum }}</div>

            <div style="display: flex; justify-content: flex-end; width: 100% ">
              <div style="padding-right: 2%">
                <t-dropdown
                    :options="[{ content: '提前10分钟', timeBeforehand: 10 },
                    { content: '提前15分钟', timeBeforehand: 15 }, { content: '提前30分钟', timeBeforehand: 30 }]"
                    @click="(data) => changNoticeTime(data, item.group.id)"
                >
                  <t-button theme="primary" shape="circle" variant="base" >
                    <NotificationIcon />
                  </t-button>
                </t-dropdown>

              </div>
              <div style="padding-right: 2%">
                <t-button theme="primary" shape="rectangle" variant="base" @click="activityVisible = true">活动详情
                </t-button>
                <t-dialog :cancel-btn="null"
                          confirm-btn="活动拼团页跳转" v-model:visible="activityVisible" @confirm="jumpTo(item.activity.id)">
                  <div>活动名: {{item.activity.activityName}}</div>
                  <div>活动描述: {{item.activity.description}}</div>
                  <div>活动类型: {{item.activity.type}}</div>
                  <div>截止时间: {{item.activity.expirationTime}}</div>
                </t-dialog>
              </div>
              <div style="padding-right: 2%">
                <t-button theme="primary" shape="rectangle" variant="base" @click="groupVisible = true">队伍详情</t-button>
                <t-dialog :footer="false" v-model:visible="groupVisible">
                  <div>活动地点: {{item.group.address}}</div>
                  <div>联系方式: {{item.group.contactInfo}}</div>
                  <div>团队描述: {{item.group.description}}</div>
                </t-dialog>
              </div>
            </div>

          </t-card>
        </div>
      </div>
      <t-space v-else direction="vertical" align="center" style="width: 100%;  padding-top: 10%">
        <t-empty/>
      </t-space>

      <div style="padding-left: 2%; padding-right: 2%; padding-top: 2%">
        <t-pagination
            v-model="current"
            v-model:pageSize="pageSize"
            :total=total
            @change="onChange"
            @page-size-change="onPageSizeChange"
            @current-change="onCurrentChange"
            :pageSizeOptions="pageSizeOption"
        />
      </div>
    </t-content>
  </t-layout>
</template>

<style scoped>

</style>